<template>
  <div>
    <!-- 搜索与添加按钮 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 搜索与添加区域 -->
        <el-input placeholder="商品名称" v-model="listQuery.name" clearable @clear="search">
          <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
        </el-input>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'SiteSearchAndAdd',
  props: {
    listQuery: {
      type: Object,
      default () {
        return {
          name: '',
          page: 1, // 当前页
          size: 10 // 每页显示多少条数据
        }
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    // 点击搜索按钮时，通知外部组件重新获取用户列表
    search () {
      this.$emit('goods-list')
    },
    addGoods () {
      // 跳转到添加商品的界面
      this.$router.push('/add')
    }
  }
}
</script>

<style scoped>

</style>
